<template>
  <div>
    <el-container style="padding: 20px">
      <el-aside :width="aside">
        <el-menu @select="filterPaper" v-loading="loading" default-active="all" :class="fixed ? 'menu' :''">
          <el-menu-item index="all">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang"></use>
                </svg>
              </span>
              全部论文
            </template>
          </el-menu-item>
          <el-menu-item v-for="(year, index) in years" :key="index" :index="year">
            <template slot="title">
              <span style="margin-right: 20px">
                <svg class="ali-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
              </span>
              {{year}}
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-timeline v-loading="loading">
          <el-timeline-item :timestamp="paper.pubDate" placement="top" v-for="(paper, index) in showPapers" :key="index">
            <el-card>
              <div slot="header" class="clearfix">
                  <span>
                    <span style="margin-right: 20px">
                        <svg class="ali-icon" aria-hidden="true">
                            <use xlink:href="#icon-wendang1"></use>
                        </svg>
                    </span>
                    <strong>{{paper.name}}</strong>
                  </span>
              </div>
              <div class="item">
                 <a :href="'https://scihubtw.tw/' + paper.doi" target="_blank" class="link">
                   <svg class="ali-icon" aria-hidden="true" >
                        <use xlink:href="#icon-FQx"></use>
                   </svg>原文
                 </a>
              </div>
              <div class="item">
                 <a :href="'http://doi.org/' + paper.doi" target="_blank" class="link">
                   <svg class="ali-icon" aria-hidden="true" >
                        <use xlink:href="#icon-lianjie"></use>
                   </svg>IEEE
                 </a>
              </div>
              <div class="item" v-if="paper.filename">
                 <a :href="baseURI + 'upload/' + paper.uploadId" class="link">
                   <svg class="ali-icon" aria-hidden="true" >
                        <use xlink:href="#icon-ppt"></use>
                   </svg>PPT
                 </a>
              </div>
              <div>
                <span>
                  <span style="margin-right: 20px">
                    <svg class="ali-icon" aria-hidden="true">
                      <use xlink:href="#icon-huabanfuben"></use>
                    </svg>
                  </span>
                  <strong>作者:</strong>&nbsp; {{paper.author}}
                </span>
                <span v-show="paper.type==='c'">
                  <span style="margin: 20px">
                    <svg class="ali-icon" aria-hidden="true">
                      <use xlink:href="#icon-C"></use>
                    </svg>
                  </span>
                  <strong>会议论文:</strong>&nbsp; {{paper.inst}}
                </span>
                <span v-show="paper.type==='j'">
                  <span style="margin: 20px">
                    <svg class="ali-icon" aria-hidden="true">
                      <use xlink:href="#icon-J"></use>
                    </svg>
                  </span>
                  <strong>期刊论文:</strong>&nbsp; {{paper.inst}}
                </span>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    fixed: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      aside: '200px',
      baseURI: null,
      years: [],
      papers: [],
      showPapers: [],
      loading: true
    }
  },
  mounted () {
    window.addEventListener('resize', this.onResize)
    this.onResize()
  },
  created () {
    this.baseURI = this.$http.defaults.baseURL
    this.$http.get('paper/list').then(res => {
      var paperList = res.data
      paperList.sort((a, b) => {
        return new Date(b.pubDate).getTime() - new Date(a.pubDate).getTime()
      })
      var yearList = []
      var year = null
      paperList.forEach(paper => {
        var year1 = Number(paper.pubDate.substr(0, 4))
        if (year !== year1) yearList.push(year1 + '')
        year = year1
      })
      this.loading = false
      this.years = yearList
      this.papers = paperList
      this.showPapers = paperList
    })
  },
  methods: {
    filterPaper (year) {
      var papers = this.papers
      var showPapers = []
      if (year === 'all') showPapers = papers
      else {
        papers.forEach(paper => {
          var year1 = paper.pubDate.substr(0, 4)
          if (year1 === year) showPapers.push(paper)
        })
      }
      this.showPapers = showPapers
    },
    onResize () {
      const width = document.body.getBoundingClientRect().width
      if (width > 1500) this.aside = '200px'
      else this.aside = '160px'
    }
  }
}
</script>

<style scoped>
.ali-icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  fill: currentColor;
  overflow: hidden;
}
.item {
  float: right;
  padding: 3px 0;
  margin: 0 10px;
}
a {
  text-decoration:none;
  color:inherit;
}
.link{
  height:30px;
  line-height:30px;
}
.menu{
  position: fixed;
  top: 81px;
  width: inherit;
}
</style>
